<!--
  功能：大冒险闯关模式 - 关卡列表页面
  说明：展示大冒险关卡列表，记录通关进度，支持查看答题记录
-->
<template>
	<view class="content bg-397ff3">
	<view class="header bg-ff border-b-ee" :style="'padding-top:'+$statusBarHeight+'px;'">
		<view class="header-box dis-flex-hsb dis-flex-vc">
			<view class="header-back dis-flex-hv w-60" @click="goBack">
				<i class="gjjd-iconfont icon-xiangzuo font-s20 color-33"></i>
			</view>
			<view class="header-title font-s18 font-wb color-33 text-C">竞赛</view>
			<view class="header-placeholder w-60"></view>
		</view>
	</view>
		
		<view class="body" :style="'padding-top:'+(50+$statusBarHeight)+'px;'">
			<view class="cover-container">
				<image v-if="coverUrl" :src="coverUrl" mode="aspectFill" class="cover-bg-image"></image>
				<view v-else class="cover-bg-placeholder"></view>
				
				<view class="mode-tag-overlay">
					<text class="font-s14 font-wb color-ff">大冒险模式</text>
				</view>
				
				<view class="score-overlay">
					<text class="font-s16 color-33">个人积分：</text>
					<text class="font-s20 font-wb color-red">{{totalScore}}</text>
				</view>
	</view>
	
	<view>
	<view class="rules-box">
		<view class="rules-title color-ff">规则说明:</view>
		<rich-text class="rules-text color-ff" :nodes="ruleText || '每题答时间30秒内，每关正确率达60%，方可通过当前关卡，进入下一关'"></rich-text>
	</view>
			
			<view class="levels-list">
				<view v-if="levels.length === 0" class="empty-tip bg-ff radius-16" style="padding: 60rpx 30rpx; text-align: center;">
					<text class="font-s15 color-99">暂无关卡数据</text>
				</view>
				
				<view 
					v-for="(level, index) in levels" 
					:key="level.id"
					class="level-item dis-flex-hsb bg-ff radius-16 shadow-sm transition-all"
					@click="goToQuestion(level)"
			>
				<view v-if="level.stars > 0" class="completed-tag bg-fed912 radius-8">
					<text class="font-s12 font-wb color-ff">已完成</text>
				</view>
				
				<view class="level-left dis-flex-vc">
					<view class="level-icon bg-0066ff radius-full"></view>
					<text class="level-name font-s16 color-33">第{{getLevelName(index)}}关</text>
				</view>
					
					<view class="level-right dis-flex-vc">
						<view class="stars dis-flex-vc">
							<image 
								v-for="star in 3" 
								:key="star"
								class="star-item"
								:src="star <= level.stars ? '/static/images/xi.png' : '/static/images/xu.png'"
							></image>
						</view>
						
						<view class="arrow-icon dis-flex-hv">
							<view class="arrow-triangle"></view>
						</view>
					</view>
				</view>
			</view>
			
		<!-- 答题记录按钮 -->
		<view class="record-btn" @click="goToRecord">
			<text class="font-s16 font-wb color-ff">答题记录</text>
		</view>
		</view>
	</view>
</view>
</template>

<script>
import { getBigAdventureInfo } from "@/api/competition";
import { useUserStore } from '@/store/user';
import { useCompetitionStore } from '@/store/competition';

// 关卡名称映射表
const LEVEL_NAMES = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];

export default {
	setup() {
		const userStore = useUserStore()
		const competitionStore = useCompetitionStore()
		return {
			userStore,
			competitionStore
		}
	},
	data() {
		return {
			totalScore: 0, // 总积分
			coverUrl: '', // 封面图片
			ruleText: '', // 规则说明（HTML格式）
			dailyNum: 0, // 每日可参与次数
			todayCount: 0, // 今日已参与次数
			levels: [] // 关卡列表（从后端加载）
		}
	},
	onLoad() {
		// 检查竞赛ID
		if (!this.competitionStore.checkMatchId()) {
			return;
		}
		this.loadAdventureInfo();
	},
	onShow() {
		// 每次显示页面时重新加载数据
		this.loadAdventureInfo();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		getLevelName(index) {
			return LEVEL_NAMES[index] || (index + 1);
		},
		
		/**
		 * 加载大冒险信息
		 */
		async loadAdventureInfo() {
			try {
				uni.showLoading({ title: '加载中...' });
				
				// 检查登录状态
				if (!this.userStore.checkLogin()) {
					uni.hideLoading();
					return;
				}
				
				const res = await getBigAdventureInfo({
					matchId: this.competitionStore.currentMatchId,
					userId: this.userStore.userId
				});
				uni.hideLoading();
				
				console.log('=== 【大冒险】完整API响应 ===');
				console.log('响应对象：', JSON.parse(JSON.stringify(res)));
				
				// 后端 Result 类定义：1-成功，0-失败
				if (res.code === 1 && res.data) {
					console.log('✅ 进入成功分支');
					this.coverUrl = res.data.cover || '';
					this.ruleText = res.data.rule || '';
					this.dailyNum = res.data.dailyNum || 0;
					this.todayCount = res.data.todayCount || 0;
					this.totalScore = res.data.totalPoint || 0;
					
					const checkpoints = res.data.checkpoints || [];
					this.levels = checkpoints.map((cp, index) => {
						const stars = cp.bestCorrectNum || 0;
						let locked = false;
						if (index > 0) {
							locked = !checkpoints[index - 1].isPassed;
						}
						return {
							id: cp.id,
							title: cp.title,
							stars: stars,
							locked: locked,
							isPassed: cp.isPassed,
							attemptCount: cp.attemptCount,
							examNum: cp.examNum
						};
					});
					
					console.log('✅ 关卡列表：', this.levels);
				} else {
					console.log('❌ API返回失败');
					uni.showToast({
						title: res.msg || '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('❌ 加载大冒险信息失败：', error);
				uni.hideLoading();
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				});
			}
		},
		
		goToQuestion(level) {
			// 检查次数限制
			if (this.todayCount >= this.dailyNum) {
				uni.showModal({
					title: '温馨提示',
					content: `今日参与次数已用完，每日限制${this.dailyNum}次`,
					showCancel: false
				});
				return;
			}
			
			if (level.locked) {
				uni.showToast({
					title: '请先通过前一关',
					icon: 'none'
				});
				return;
			}
			
			// 跳转到答题页面，传递 matchId、checkpointId 和 title
			uni.navigateTo({
				url: `/pages/competition/adventure/adventure-question?matchId=${this.matchId}&checkpointId=${level.id}&title=${level.title}`
			});
		},
		
		goToRecord() {
			uni.navigateTo({
				url: '/pages/competition/adventure/adventure-record'
			});
		}
	}
}
</script>

<style scoped>
.content {
	min-height: 100vh;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
}

.header-box {
	height: 50px;
	padding: 0 20rpx;
}

.header-title {
	flex: 1;
}

.body {
	padding: 0;
}

.cover-container {
	position: relative;
	width: 100%;
	height: 280rpx;
	margin-bottom: 0;
	overflow: hidden;
}

.cover-bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.cover-bg-placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #397ff3;
	z-index: 1;
}

.mode-tag-overlay {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	padding: 8rpx 20rpx;
	background: rgba(51, 51, 51, 0.8);
	border-radius: 8rpx;
	z-index: 2;
}

.score-overlay {
	position: absolute;
	top: 140rpx;
	right: 20rpx;
	padding: 20rpx 30rpx;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	z-index: 2;
}

.rules-box {
	padding: 25rpx 30rpx 30rpx 30rpx;
	background: transparent;
}

.rules-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.rules-text {
	font-size: 14px;
	line-height: 1.6;
	word-wrap: break-word;
}

.rules-text :deep(p) {
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

.levels-list {
	display: flex;
	flex-direction: column;
	gap: 25rpx;
	margin-bottom: 20rpx;
	padding: 0 20rpx;
}

.level-item {
	position: relative;
	padding: 25rpx 30rpx;
}

.level-item:active {
	transform: scale(0.98);
}

.completed-tag {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4rpx 12rpx;
	z-index: 2;
}

.level-left {
	gap: 20rpx;
}

.level-icon {
	width: 50rpx;
	height: 50rpx;
}

.level-right {
	gap: 4rpx;
	margin-right: 100rpx;
}

.stars {
	gap: 16rpx;
	margin-right: 24rpx;
}

.star-item {
	width: 40rpx;
	height: 40rpx;
}

.arrow-icon {
	margin: 0 6rpx;
}

/* 箭头三角形（border实现，无法用类替代） */
.arrow-triangle {
	width: 0;
	height: 0;
	border-top: 14rpx solid transparent;
	border-bottom: 14rpx solid transparent;
	border-left: 20rpx solid #333;
}

.record-btn {
	text-align: center;
	padding: 100rpx 0 40rpx 0;
}
</style>